<template>
  <view :class="classArr">
    测试
    <!-- <view :class="[ns.e('header')]" :style="slotStyle.top">
      <slot :name="top"></slot>
    </view>
    <view :class="[ns.b('content')]">
      <view :class="[ns.be('content', 'left')]" :style="slotStyle.left">
        <slot :name="left"></slot>
      </view>
      <view :class="[ns.be('content', 'center')]">
        <slot :name="center"></slot>
      </view>
      <view :class="[ns.be('content', 'right')]" :style="slotStyle.right">
        <slot :name="right"></slot>
      </view>
    </view>
    <view :class="[ns.e('footer')]" :style="slotStyle.bottom">
      <slot :name="bottom"></slot>
    </view> -->
  </view>
</template>

<script setup lang="ts">
import { IPanelContainer } from '@ibiz/model-core'
import { computed } from 'vue'
import { useNamespace } from '@/use'
import { ScrollContainerController } from './i-biz-scroll-container.controller'

// 定义组件接收的属性
const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelContainer>,
    required: true,
  },
  controller: {
    type: ScrollContainerController,
    required: true,
  },
})

// 获取命名空间和计算类名数组
const ns = useNamespace('scroll-container')
const { id } = props.modelData
const classArr = computed(() => {
  const result: Array<string | false> = [
    ns.b(),
    ns.m(id),
    ...props.controller.containerClass,
    ns.is('hidden', !props.controller.state.visible),
  ]
  return result
})
</script>
<style lang="scss">
@import './i-biz-scroll-container';
</style>
